<template>
	<view class="app-competition">
		<NavBar title="赛事" :isHeight="false"></NavBar>
		<SwiperList />
		<!-- 背景图 -->
		<view class="main-bg"></view>
		<!-- 主要内容区 -->
		<view class="main-content">
			<!-- 通知栏 -->
			<NotificationList />
			<view class="search">
				<image src="/static/icons/search.svg" mode="" />
				<input type="text" placeholder="搜索赛事项目" />
			</view>
			<view class="filters">
				<view class="item" v-for="(filter, index) in filtersData" :key="index" @click="showPicker = index">
					<view class="name">{{ filter.selectedValue || filter.label }}</view>
					<image src="/static/icons/down.svg" />
					<picker class="picker-mask" mode="selector" :range="filter.options"
						@change="handlePickerChange(index, $event)"></picker>
				</view>
			</view>
			<HotEventsList />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import SwiperList from '@/components/SwiperList.vue'
import NotificationList from '@/components/NotificationList.vue'
import HotEventsList from '@/components/HotEventsList.vue'

// 定义筛选器数据
const filtersData = ref([
	{
		label: '山东省',
		options: ['山东省', '北京市', '上海市', '广东省'],
		selectedValue: ''
	},
	{
		label: '类型',
		options: ['类型1', '类型2', '类型3'],
		selectedValue: ''
	},
	{
		label: '奖金',
		options: ['1000元', '2000元', '3000元'],
		selectedValue: ''
	},
	{
		label: '不限挡位',
		options: ['不限挡位', '低挡位', '中挡位', '高挡位'],
		selectedValue: ''
	}
])

// 记录当前显示 picker 的索引
const showPicker = ref(-1)

// 处理 picker 选择事件
const handlePickerChange = (index, event) => {
	const value = event.detail.value
	filtersData.value[index].selectedValue = filtersData.value[index].options[value]
	showPicker.value = -1
}
</script>

<style lang="scss" scoped>
.app-competition {
	min-height: 100vh;
	background: #F5F6F8;

	.main-bg {
		background: linear-gradient(180deg, #FFFFFF 78%, #F5F6F8 100%);
		border-radius: 40rpx 40rpx 0 0;
		padding: 20rpx 28rpx 0 28rpx;
		position: absolute;
		left: 0;
		height: 700rpx;
		width: 100%;
		margin-top: -54rpx;
	}

	.main-content {
		padding: 20rpx 28rpx;
		position: relative;
		margin-top: -54rpx;
	}

	.search {
		display: flex;
		align-items: center;
		height: 64rpx;
		background: #F5F6F8;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		gap: 12rpx;
		padding: 0 24rpx;
		margin-top: 12rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}

		input {
			flex: 1;
			font-size: 28rpx;
			color: #909399;
			line-height: 40rpx;
			height: 64rpx;
			line-height: 64rpx;
		}
	}

	.filters {
		display: flex;
		align-items: center;
		height: 88rpx;
		margin: 10rpx -28rpx 0 -28rpx;
		border-bottom: 1rpx solid #EBEEF5;

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			position: relative;

			.picker-mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.name {
				font-size: 28rpx;
				color: #303133;
				line-height: 41rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 4rpx;
			}
		}
	}
}
</style>